<template>
  <div class='user-register'>
    <m-header-title headerTitle="register" @goBack='goBack'/>
    <m-pull-refresh @refReshSend='refReshSend'>
      <template v-slot>
          <van-form @failed="onFailed">
          <van-cell-group inset>
            <div class='input-item'>
              <van-field
                v-model="userName"
                name="手机号"
                label="手机号"
                type="text"
                placeholder="请录入手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
              />
            </div>
            <div class='input-item'>
              <van-field
                v-model="newPwd_1"
                name="用户密码"
                label="用户密码"
                :type="[newPwd_1_Active ?'text' : 'password']"
                placeholder="请录入用户密码"
                :rules="[{ required: true, message: '请填写用户密码' }]"
              />
              <van-icon :name="[newPwd_1_Active ? 'eye-o' : 'closed-eye']" class='icon' @click='newPwd_1_Active = !newPwd_1_Active'/>
            </div>
            <div class='input-item'>
              <van-field
                v-model="newPwd_2"
                name="重复新密码"
                label="重复新密码"
                :type="[newPwd_2_Active ?'text' : 'password']"
                placeholder="重复新密码"
                :rules="[{ required: true, message: '重复新密码' }]"
              />
              <van-icon :name="[newPwd_2_Active ? 'eye-o' : 'closed-eye']" class='icon' @click='newPwd_2_Active = !newPwd_2_Active'/>
            </div>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" @click='onFailed' :disabled='!userName || !newPwd_1 || !newPwd_2'>
              注册
            </van-button>
          </div>
        </van-form>
      </template>
    </m-pull-refresh>
  </div>
</template>

<script lang="ts">
import { useI18n } from '@/i18nPlugin'
import { toRefs, defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'

import {MHeaderTitle, MPullRefresh} from '@/components'

//接口
import { userRegister } from '@/config/api'

export default defineComponent({
  nem: 'UserRegister',
  components: {
    MHeaderTitle,
    MPullRefresh
  },
  setup: () => {
    const i18n = useI18n()
    const router = useRouter()
    const data = reactive({
      newPwd_1_Active:false,
      newPwd_2_Active: false,
      userName:"",
      newPwd_1:'',
      newPwd_2:''
    })
    const goBack =()=> {
      router.replace('/Login')
    }
    const refReshSend = ()=> {
      data.userName = ''
      data.newPwd_1 = ''
      data.newPwd_2 = ''
    }
    const onFailed = ()=> {
      if(data.newPwd_1 != data.newPwd_2) {
        (<any>window).utils.ui.Toast('两次密码不一致，请确认您录入的新密码！')
        return
      }
      let req = {
        userName:data.userName,
        userPwd:data.newPwd_1
      }
      userRegister(req).then((res:any) => {
        if(res.data.responseCode === 1000) {
          (<any>window).utils.ui.Toast(`${res.data.responseMsg}`)
          setTimeout(()=>{
            router.replace(`/login`)
          },2000)
        }
      })
    }
    return { ...toRefs(data), i18n,goBack,onFailed,refReshSend }
  },
})
</script>

<style scoped lang="scss">
.user-register {
  padding-top: 40px;
  .van-form {
    margin-top: 40px;
    .input-item {
      position: relative;
      .van-icon {
        position: absolute;
        right: 10px;
        top: 15px;
        font-size: 16px;
      }
    }
  }
}
</style>
